
<template>
    <div id="con">
        <div class="con2">
            <el-Button @click="dialogVisible = true" class="btn">添加物流线路</el-Button>
            <el-input placeholder="请输入关键字" @change="change" v-model="input"></el-input>
            <el-Button @click="search" class="btn">搜索</el-Button>
        </div>

        <el-dialog title="添加物流线路" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" class="dialog">
            <el-input placeholder="请输入线路名称" clearable v-model="input1" @change="change"></el-input>
            <el-input placeholder="请输入途径" clearable v-model="input2" @change="change"></el-input>
            <el-input placeholder="请输入地址" clearable v-model="input3" @change="change"></el-input>
            <el-input placeholder="请输入电话" clearable v-model="input4" @change="change"></el-input>
            <el-button @click="handle">提交</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <div style="min-height: 450px;">
            <div style="width: 100%;padding:10px;line-height:20px">
                <table align="center" width="100%" class="table" border="0">
                    <tbody>
                        <tr>
                            <th colspan="10" class="zxstyle ly">物流管理系统</th>
                        </tr>
                        <tr class="tr">
                            <th class="zxstyle">序号</th>
                            <th class="zxstyle">线路名称</th>
                            <th class="zxstyle">途径</th>
                            <th class="zxstyle">地址</th>
                            <th class="zxstyle">电话</th>
                            <th class="zxstyle">操作</th>
                        </tr>
                        <tr v-for="(item, index) in arr" :key="index" :style="td">
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.tujing }}</td>
                            <td>{{ item.address }}</td>
                            <td>{{ item.num }}</td>
                            <el-button @click="zhiding(index)">置顶</el-button>
                            <el-button @click="edit(index)">编辑</el-button>
                            <el-button
                                @click="del(index, item.name, item.tujing, item.address, item.num, item.only)">删除</el-button>
                            <el-dialog title="修改数据" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose"
                                class="dialog">
                                名称： <el-input placeholder="请输入名称" clearable v-model="input11" @change="change"
                                    value="1253254" initialValue="dee"></el-input>
                                途径： <el-input placeholder="请输入途径" clearable v-model="input22" @change="change"></el-input>
                                地址： <el-input placeholder="请输入地址" clearable v-model="input33" @change="change"></el-input>
                                电话 <el-input placeholder="请输入电话" clearable v-model="input44" @change="change"></el-input>
                                <el-button @click="handleChange()">提交修改</el-button>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </tr>
                    </tbody>
                </table>

            </div>
            <div class="block">
                <el-pagination background layout="prev, pager, next" :total="length" @current-change="pager"
                    :page-size="10"></el-pagination>
            </div>
        </div>
    </div>
    <!--                                                                                                                                                                                                                                                                                                                             </div> -->
</template>
<style>
.con2 {
    display: flex;
    line-height: 50px;
}

.btn {
    width: 120px;
    height: 45px;
}

.con2>.el-input {
    width: 150px;
    padding-left: 750px;
    padding-right: 10px;
}

.con2>.el-button {
    background-color: rgb(19, 74, 104);
    color: white;
}



.dialog {
    width: 1500px;
}

.zxstyle {
    text-align: left;
    font-weight: bold;
}

.ly {
    text-align: center;
    font-size: 25px;
    color: #00a7d0;
}

.tr {
    border-bottom: 1px solid red;
}

.table>tbody>tr>td {
    vertical-align: middle;
}

.avatar {
    width: 100px;
    height: 100px;
}

.table {
    border-collapse: collapse;
}
</style>
<script>

import { login2, login3, list2, del2, change2, add2, search, zhiding } from "@/api/index";
export default {
    inject: ['reload'],
    data() {
        return {
            input: "",
            input1: "",
            input2: "",
            input3: "",
            input4: "",
            input11: "",
            input22: "",
            input33: "",
            input44: "",
            dialogVisible2: false,
            dialogVisible: false,
            newList: [],
            fileList: [],
            td: {
                borderColor: "black",
                borderStyle: "dotted",
                borderWidth: "1px",
            },
            tr: {
                borderColor: "black",
                borderStyle: "dotted",
                borderWidth: "1px",
                backgroundColor: 'blue'
            },
            container: {
                height: "500px",
                borderStyle: "dotted",
                borderWidth: "1px",
            },
            news: {
                display: 'flex'
            },
            newobj: {
                marginLeft: '10px',
                width: '150px',
                height: '260px',
                // background: 'red',
                borderStyle: "dotted",
                borderWidth: "1px",
            },
            con: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            },
            dialog: {
                display: 'flex',
            },
            upload: {

            },
            name: "",
            dialogVisible: false,
            arr: [],
            token: localStorage.getItem("token"),
            imageUrl: '',
            type: "",
            size: 0,
            pageNum: 1,
            length: 0,
            newarr: [],
            ok: "",
            base64: "",
            index: -1,
            obj: {},
            index: 0,
            arr1: []

        };
    },
    async create() {
        let sjList = await list2();
        this.newList = sjList.data;
        this.length = sjList.data.length;
        this.arr = this.newList;
        this.arr = this.arr.slice(0, 10);
        console.log("create")
    },
    methods: {
        async search() {
            console.log(this.input)
            let sea = this.input;
            let res = await search({ sea })
            console.log(res)
            console.log("搜索")
            this.length = res.data.length;
            this.arr = res.data
        },
        async zhiding(index) {
            let only = this.arr[index].only;
            await zhiding({ only })
            // this.arr = await list2().slice(10 * (this.pageNum - 1), 10 * this.pageNum)
            let data = await list2();
            this.arr = data.data.slice(10 * (this.pageNum - 1), 10 * this.pageNum);
            console.log("置顶后的数据")
            console.log(this.arr)
            // this.arr1 = [];
            // this.arr1.push(this.arr[index])
            // for (let i = 0; i < this.arr.length; i++) {
            //     if (this.arr[i] !== this.arr[index]) {
            //         this.arr1.push(this.arr[i])
            //     }
            // }
            // this.arr = this.arr1;
            // console.log(this.arr[index].name)
        },
        edit(index) {
            this.index = index;
            console.log(index);
            console.log(this.arr, this.arr[index])
            this.input11 = this.arr[index].name;
            this.input22 = this.arr[index].tujing;
            this.input33 = this.arr[index].address;
            this.input44 = this.arr[index].num;
            this.dialogVisible2 = true;
        },
        async handleChange() {
            console.log("变化");
            console.log(this.arr)
            let name = this.arr[this.index].name;
            let tujing = this.arr[this.index].tujing;
            let address = this.arr[this.index].address;
            let num = this.arr[this.index].num;
            let only = this.arr[this.index].only;
            let newname = this.input11;
            let newtujing = this.input22;
            let newaddress = this.input33;
            let newnum = this.input44;
            let res = await change2({ name, tujing, address, only, num, newname, newtujing, newaddress, newnum })
            this.arr[this.index].name = this.input11;
            this.arr[this.index].tujing = this.input22;
            this.arr[this.index].address = this.input33;
            this.arr[this.index].num = this.input44;
        },
        async handle() {
            console.log(this.input1, this.input2, this.input3, this.input4)
            let name = this.input1;
            let tujing = this.input2;
            let address = this.input3;
            let num = this.input4;
            let only = Math.random().toString(36).slice(-8);
            let top = 0;
            this.obj.name = this.input1;
            this.obj.tujing = this.input2;
            this.obj.address = this.input3;
            this.obj.num = this.input4;
            let res = await add2({ name, tujing, address, num, only, top })
            console.log(res)
            this.newList = res.data;
            // this.newList.push(this.obj);
            this.arr = this.newList.slice((this.pageNum - 1) * 10, this.pageNum * 10)
            this.length = this.length + 1;
        },
        change() {
            console.log(this.input, this.input1, this.input2, this.input3, this.input4)
        },
        async check() {
            let sjList = await list2();
            console.log(sjList)
            this.newList = sjList.data;
            this.length = sjList.data.length;
            this.arr = this.newList;
            this.arr = this.arr.slice(0, 10);
        },
        async del(index, name, tujing, address, num, only) {
            console.log("删除:" + this.pageNum);
            let res = await del2({ name, tujing, address, num, only });
            console.log(res)
            let sjList = await list2();
            this.newList = sjList.data;
            this.length = sjList.data.length;
            this.arr = this.newList;
            console.log(this.pageNum, this.length)
            if (this.length % 10 == 0 & this.pageNum > 1) {
                this.pageNum = this.pageNum - 1;
            }
            if (this.pageNum > 1 && this.length % 10 !== 0) {
                this.arr = this.arr.slice((this.pageNum - 1) * 10, this.pageNum * 10);
            } else if (this.length % 10 == 0 && this.pageNum > 1) {
                this.arr = this.arr.slice((this.pageNum - 2) * 10, (this.pageNum - 1) * 10);
            } else {
                this.arr = this.arr.slice(0, 10)
            }

        },

        async pager(currentPage) {
            let data = await list2();
            this.newList = data.data;
            this.arr = this.newList.slice((currentPage - 1) * 10, 10 * currentPage);
            this.pageNum = currentPage;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        async submitUpload() {
            console.log("上传到服务器:   ");
            await this.$confirm("上传文件，是否继续？", "提示")
                .then(async () => {
                    let result2 = await login3();
                    console.log(result2)
                    if (result2.data == "token有效") {
                        console.log("有效的，上传图片")
                        let result = await login2()
                        if (result.data == "上传成功") {
                            this.length = this.arr.length;
                            console.log(this.arr)
                            if (this.arr.length <= 2) {
                                console.log("大于2️")
                                this.newarr = this.arr;
                            } else {
                                this.newarr = this.arr.slice(0, 2)
                            }
                            this.$message.success("上传成功");

                        }

                    }
                    return true;
                })
                .catch(() => {
                    this.$message.success("取消成功");
                    this.fileList = [];
                    return false;
                });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {

        },
        handleSucess(res) {
            console.log("成功" + JSON.stringify(res))
        },
        uploadCertificateChange(file, fileList) {

            file.src = URL.createObjectURL(file.raw);
            this.index = this.index + 1;
            file.index = this.index;
            file.only = Math.random().toString(36).slice(-8);
            this.arr.push(file)
        }
    },
    mounted() {
        this.check();
    }

}
</script>

